<template>
    <li :class="['menu-item',  menu.divided? 'is-divided':null, menu.disabled? 'is-disabled':'is-available', !menu.disabled && active === index ? 'is-active' : null]"
         @click="($event) => menusClick($event, menu, parent)"
         @contextmenu="($event) => menusClick($event, menu, parent)"
         @mouseenter="($event) => menusEnter($event)"
         @mouseleave="($event) => menusLeave($event)">
        <div :class="['menu-item-ctx']">
            <i class="menu-item-icon">
                <menu-icon :icon="menu.icon"/>
            </i>
            <span class="menu-item-label">
                {{ menu.label }}
            </span>
            <div class="menu-item-suffix">
                <template v-if="menu.children">▶</template>
                <span v-if="menu.tip" class="menu-item-tip">{{ menu.tip }}</span>
            </div>
        </div>
        <children-render v-if="menu.children && active === index"/>
    </li>
</template>

<script lang="ts" setup>
import {ref, inject, h} from "vue";
import {ContextMenuData, ContextMenuItemProps} from './interface'
import Menu from './index.vue';
import MenuIcon from './menu-icon.vue';


const props = defineProps<ContextMenuItemProps>()

defineOptions({name: 'MenuItem'})

const emit = defineEmits(['update:active']);
const target = ref<any>();
const close = inject('onClose', () => {});
const data = inject('SelectedData', ref(undefined));
const min = ref('0px');
const max = ref('0px');
const zIndex = ref('3');
const level = ref('1');

function menusEnter(event: any) {
    const node = event.target.parentNode;
    zIndex.value = node.style.getPropertyValue('z-index');
    min.value = node.style.getPropertyValue('min-width');
    max.value = node.style.getPropertyValue('max-width');
    level.value = node.style.getPropertyValue('--level-number') || '1';

    target.value = event.target.getBoundingClientRect();
    emit('update:active', props.index);
    event.preventDefault();
}

function menusLeave(event: any) {
    target.value = event.target.getBoundingClientRect();
    emit('update:active', -1);
    event.preventDefault();
}

function menusClick(event: any, item: ContextMenuData, parent?: Array<ContextMenuData>) {
    event.preventDefault();
    if (item?.disabled) {
        event.stopPropagation();
        return;
    }

    if (item && !item.hidden && typeof item.click === "function") {
        const val = item.click(data.value, item, parent);
        if (val === false) {
            event.stopPropagation();
        } else {
            close();
        }
    }

}

const ChildrenRender = () => {
    const number = Number(level.value) + 1;
    return h(Menu, {
        data: data.value,
        menus: props.menu?.children,
        event: undefined,
        position: {
            x: target.value.x + 3,
            y: target.value.y - 8,
            width: target.value.width - 2 * 3,
            height: target.value.width || 0
        },
        modelValue: true,
        teleported: false,
        minWidth: min.value,
        maxWidth: max.value,
        zIndex: Number(zIndex.value),
        direction: props.direction,
        menuStyle: {
            '--level-number': number
        }
    });
}
</script>

<style lang="scss" scoped>
.menu-item {
    display: flex;
    line-height: 2.5rem;
    /*padding: 0 0.5rem;*/
    margin: 0;
    font-size: 14px;
    outline: 0;
    align-items: center;
    transition: 0.2s;
    box-sizing: border-box;
    list-style: none;
    border-bottom: 1px solid #00000000;

    .menu-item-ctx {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 0.5rem;

        .menu-item-icon {
            --color: inherit;
            display: inline-flex;
            height: 1em;
            justify-content: center;
            line-height: 1em;
            position: relative;
            width: 1em;
            fill: currentColor;
            color: var(--color);
            font-size: inherit;
            margin-right: 5px;
        }

        .menu-item-label {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .menu-item-suffix {
            margin-left: 1.5rem;
            font-size: 0.39rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .menu-item-tip {
            font-size: 9px;
            color: var(--el-text-color-disabled);
        }
    }
}

.is-divided {
    border-bottom-color: var(--el-border-color);
}


.is-available .menu-item-ctx{
    cursor: pointer;
    &:hover {
        background: var(--el-fill-color);
    }
}

.is-disabled {
    color: var(--el-text-color-disabled);
    cursor: not-allowed;
}

.is-active > .menu-item-ctx {
    background: var(--el-fill-color);
}
</style>
